<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #6ff;
      margin: 50px;
      overflow: hidden;
    }

    .sub {
      width: 100px;
      height: 100px;
      background-color: #00f;
      margin: 50px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="sub"></div>
  </div>
</body>
<script>
  // 事件对象  => 事件在发生的的相关信息
  // 鼠标,键盘按下的按键(左中右)  触发事件的元素 鼠标的位置  组合键(ctrl alt shift win)

  // 事件对象 

  // 如何获取事件对象?

  // 常规浏览器
  // 在绑定事件的匿名函数中接收形式参数  event/evt/e

  // IE  
  // window.event


  // 通用
  // ctrlKey   事件触发时,ctrl键是否被按下
  // altKey    事件触发时,alt键是否被按下
  // shiftKey  事件触发时,shift键是否被按下
  // metaKey   事件触发时,win键是否被按下
  // 一般用来做组合键  ctrl+enter 

  // type      事件类型(load scroll resize click mousedown keydown)
  // target    事件源(触发事件的源头 给父元素绑定事件 子元素也可以触发(现阶段可以理解为子元素属于父元素))  到底是谁触发?
  // srcElement 事件源(IE 和 常规浏览器)


  var box = document.getElementsByClassName("box")[0];

  box.onmousedown = function (e) {
    // console.log(e);
    // console.log(window.event);

    // 事件对象的兼容
    var e = e || window.event;
    console.log(e);

    // console.log(e.ctrlKey,e.altKey,e.shiftKey,e.metaKey);
    // console.log(e.type);

    // console.log(e.target,e.srcElement);
    var target = e.target || e.srcElement;
    console.log(target);

  }




</script>

</html>